<template>
  <div class="back_white">
    <div>
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="基本信息" description="Some description"/>
        <el-step title="规格参数" description="Some description"/>
        <el-step title="销售属性" description="Some description"/>
        <el-step title="SKU信息" description="Some description"/>
        <el-step title="保存完成" description="Some description"/>
      </el-steps>
    </div>
    <div>
      <div class="from_body_box">
        <div class="box-card">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>{{ cardTitle }}</span>
                <el-button class="button" text>Operation button</el-button>
              </div>
            </template>
            <div v-if="active==0">
              <Add-spu @pushSpuFromData="getSpuFromData" :spuInfo="addGoodsFrom.spuInfoDto"
                       @cateChange="updteData"></Add-spu>
            </div>
            <div v-else-if="active==1">
              <add-attribute
                  @pushAttrValueFromData="getAttrValueFromData"
                  :AttrGroupList="addGoodsFrom.attrGroupList"
                  @back="back"
              ></add-attribute>
            </div>
            <div v-else-if="active==2">
              <add-sales-attr
                  @pushSalesAttrFromData="next"
                  :SalesAttrList="addGoodsFrom.salesAttrList"
                  @back="back"
              ></add-sales-attr>
            </div>
            <div v-else-if="active==3">
              <add-sku
                  :SkuList="addGoodsFrom.skuInfoDto"
                  :spuImg="addGoodsFrom.spuInfoDto.atlas"
                  @back="back"
                  @pushSkuInfo="getSkuInfo"
              ></add-sku>
            </div>
            <div v-else-if="active==4">
              <save-goods
                  @back="back"
                  @submitSave="submitSave"></save-goods>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import AddSpu from '@/components/AddGoodsSteps/AddSpu'
import AddAttribute from '@/components/AddGoodsSteps/AddAttribute'
import AddSalesAttr from '@/components/AddGoodsSteps/AddSalesAttr'
import AddSku from '@/components/AddGoodsSteps/AddSku'
import SaveGoods from '@/components/AddGoodsSteps/SaveGoods'
import {getAttrGroupByCategoryId, getAttrByAttrGroupId, getAttrByCategoryId} from '@/api/home/goods/attrGroup'
import {save} from '@/api/home/goods/goods'
import {reactive, ref, watchEffect, computed,} from "vue";

const active = ref(0)
let addGoodsFrom = reactive({
  spuInfoDto: {
    spuName: '',
    spuDescription: '',
    categoryId: '',
    brandId: '',
    weight: 0,
    introduceImage: [],//spu介绍大图
    atlas: [],//spu的图集（Sku）
    spuDefaultImage: ''//spu默认图片
  },
  attrGroupList: [],
  salesAttrList: [],
  skuInfoDto: [],
})


/*第一个组件相关的内容*/
function getSpuFromData(data) {
  /*接受子组件传递数据*/
  // addGoodsFrom.spuInfo = data
  active.value++/*切换子组件到下一个*/
}

function updteData() {
  /*更新这个组件的数据（重新获取*/
  getAttrGroupList()
  getSalesAttrList()
}

/*获取分组信息，并且获取这个分组下的属性信息*/
function getAttrGroupList() {
  getAttrGroupByCategoryId(addGoodsFrom.spuInfoDto.categoryId).then(res => {
    addGoodsFrom.attrGroupList = res.data
    addGoodsFrom.attrGroupList.forEach(item => {
      getAttrByAttrGroupId(item.id).then(r => {
        item.attrList = r.data.data
      })
    })
  })
}

function getAttrValueFromData() {
  // addGoodsFrom.AttrGroupList = data //不需要赋值，可能是共用内存地址的原因
  active.value++/*切换子组件到下一个*/
}

function next() {
  active.value++
}

function back() {
  active.value--
}

/*销售属性组件相关*/
function getSalesAttrList() {
  getAttrByCategoryId(addGoodsFrom.spuInfoDto.categoryId, -1).then(res => {
    addGoodsFrom.salesAttrList = res.data
    addGoodsFrom.salesAttrList.forEach(item => {
      item.isInput = true
      item.skuValueList = []
    })
  })
}

/*第三个组件*/
/*处理数据笛卡尔积*/
function cartesianProduct(arr) {
  if (arr.length === 0) {
    return [[]];
  }
  const [first, ...rest] = arr;
  const cartesianOfRest = cartesianProduct(rest);
  return cartesianOfRest.flatMap(item => first.map(value => [value].concat(item)));
}

function getSkuInfo(data) {
  addGoodsFrom.skuInfoDto = data
  next()
}

function submitSave() {
  next()
}

/*监听*/
watchEffect(() => {
  if (active.value == 3 && addGoodsFrom.skuInfoDto.length == 0) {
    if (Array.isArray(addGoodsFrom.salesAttrList)) {
      console.log("为什么你是空的？", JSON.stringify(addGoodsFrom.salesAttrList))
      let result = cartesianProduct(addGoodsFrom.salesAttrList.map(item => item.skuValues));
      console.log("让我们来看看结果把：", result);
      result.map(item => {
        if (Array.isArray(item)) {
          let sku = {
            skuName: '',
            attr: [],
            skuTitle: '',
            skuSubTitle: '',
            price: Number,
            skuDefaultImg: '',
            skuImgs: []
            //  其他属性
          }
          for (let i = 0; i < item.length; i++) {
            sku.attr.push({
              attrId: addGoodsFrom.salesAttrList[i].id,
              attrName: addGoodsFrom.salesAttrList[i].attrName,
              attrValue: item[i]
            })
          }
          addGoodsFrom.skuInfoDto.push(sku)
        }
      })
    } else {
      console.log("执行到这里应该不是一个数组？", Array.isArray(addGoodsFrom.salesAttrList))
    }
  }
  if (active.value == 5) {
    save(addGoodsFrom)
    active.value = 0
  }
})

/*计算属性*/
let cardTitle = computed(() => {
  switch (active.value) {
    case 0:
      return "基本信息"
    case 1:
      return "规格参数"
    case 2:
      return "销售属性"
    case 3:
      return "SKU信息"
    case 4:
      return "完成"
  }
})
</script>
<style scoped>
.box-card {
  width: 75%;
}

.from_body_box {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.foot_class {

}
</style>
